<template>
  <div class="inlineBlock" v-bind="$attrs">
    <div class="inlineBlock" @click="openDraw">
      <slot></slot>
    </div>
    <el-drawer title="字典列表" :visible.sync="formDrawerVisible" size="600px" :append-to-body="true" direction="rtl" class="drawer_wrap">
      <div class="formTable_wrap">
        <div class="ope_wrap">
          <el-form :model="searchData_formTable" label-width="60px">
            <el-row :gutter="0">
              <template v-for="(item, index) in formTableList">
                <el-col :span="8" :key="index">
                  <el-form-item :label="item.label" :prop="item.code">
                    <template v-if="item.type === 'text'">
                      <el-input v-model.trim="searchData_formTable[item.code]" placeholder="请输入内容"></el-input>
                    </template>
                    <template v-if="item.type === 'select'">
                      <el-select v-model="searchData_formTable[item.code]" placeholder="请选择" style="width: 100%;">
                        <template v-for="(vo, i) in item.options">
                          <el-option :key="`option_${i}`" :label="vo.label" :value="vo.value"></el-option>
                        </template>
                      </el-select>
                    </template>
                  </el-form-item>
                </el-col>
              </template>
              <el-col :span="8">
                <div style="padding-left: 20px;">
                  <el-button type="primary" class="btnYellow" @click="searchFunc_formTable">搜索</el-button>
                  <el-button @click="resetFunc_formTable">重置</el-button>
                </div>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <!-- 操作按钮 -->
        <div class="handle_wrap">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="addformTableFunc">新 增</el-button>
        </div>
        <div class="table_wrap">
          <Table :theadData="formTheadData" :tableData="formTableData" :hasCheck="false" border>
            <template v-slot:ope="{ scope }">
              <div>
                <el-button type="text" @click="editformTableFunc(scope.row)">编辑</el-button>
                <el-popconfirm title="您确定要删除吗？" cancelButtonType="" @onConfirm="deleteFormFunc(scope.row)">
                  <el-button slot="reference" type="text">删除</el-button>
                </el-popconfirm>
              </div>
            </template>
          </Table>

        </div>
        <div class="page_box" v-if="totalSize_form > 0">
          <el-pagination background :current-page="currentPage_form" :page-size="pageSize_form" layout="total, prev, pager, next, jumper" :total="totalSize_form" @size-change="handleSizeChange_form" @current-change="handleCurrentChange_form"></el-pagination>
        </div>
      </div>
    </el-drawer>
    <!-- 抽屉内部  新增字典 -->
    <el-dialog :visible.sync="dialogVisible_form" :title="titleDiag_form" width="500px">
      <div class="operate_container" style="box-shadow: none;">
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">
            <span class="need">*</span>名称：</div>
          <div class="operate_right">
            <el-input v-model.trim="formAdd.itemText" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">
            <span class="need">*</span>数据值：</div>
          <div class="operate_right">
            <el-input v-model.trim="formAdd.itemValue" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">描述：</div>
          <div class="operate_right">
            <el-input v-model.trim="formAdd.description" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">排序值：</div>
          <div class="operate_right">
            <el-input-number size="mini" v-model="formAdd.sortOrder" :step="1" step-strictly></el-input-number>
          </div>
        </div>
        <div class="operate_item" style="width: 100%">
          <div class="operate_left">是否启用：</div>
          <div class="operate_right special_switch_wrap">
            <el-switch v-model="formAdd.status" active-text="启用" inactive-text="禁用">
            </el-switch>
          </div>
        </div>
      </div>
      <div style="text-align: center;">
        <el-button type="primary" @click="configSureFunc_form">确 定</el-button>
        <el-button @click="dialogVisible_form=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Table from "@/components/table/table.vue";
import * as apiObj from "@/api/dictionaryData.js";
export default {
  name: "online_dictionary_drawer",
  components: {
    Table
  },
  props: {
    currentDic: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      // 抽屉数据
      formDrawerVisible: false,
      searchData_formTable: {
        itemText: "",
        status: ""
      },
      formTableList: [
        { label: "名称", code: "itemText", type: "text" },
        {
          label: "状态",
          code: "status",
          type: "select",
          options: [
            { label: "正常", value: "1" },
            { label: "禁用", value: "2" }
          ]
        }
      ],
      formTheadData: [
        { name: "名称", code: "itemText" },
        { name: "数据值", code: "itemValue" },
        { name: "操作", code: "cz", slotName: "ope", width: 120 }
      ],
      formTableData: [],
      // 分页
      currentPage_form: 1,
      pageSize_form: 10,
      totalSize_form: 0,
      // 抽屉新增
      dialogVisible_form: false,
      titleDiag_form: "新增",
      formAdd: {
        dictId: "",
        itemText: "",
        itemValue: "",
        description: "",
        sortOrder: "",
        status: true
      },
      formCurrentId: "" //当前id
    };
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * @name openDraw
     * @description 打开抽屉弹窗
     * @author wqy
     * @date 2020-09-04 11:06:47
     */
    openDraw() {
      this.getformDrawerList();
      this.formDrawerVisible = true;
    },
    /**
     * @name searchFunc_formTable
     * @description 查询
     * @author wqy
     * @date 2020-09-03 16:43:10
     */
    searchFunc_formTable() {
      this.handleCurrentChange_form(1);
    },
    /**
     * @name resetFunc_formTable
     * @description 重置搜索方法
     * @author wqy
     * @date 2020-09-03 14:18:21
     */
    resetFunc_formTable() {
      this.searchData_formTable = {
        itemText: "",
        status: ""
      };
      this.searchFunc_formTable();
    },
    /**
     * @name getformDrawerList
     * @description 获取抽离里字典列表
     * @author wqy
     * @date 2020-09-03 16:43:10
     */
    async getformDrawerList() {
      let { itemText, status } = this.searchData_formTable;
      const res = await apiObj.getSysDictItemList({
        pageNo: this.currentPage_form,
        pageSize: this.pageSize_form,
        itemText: itemText,
        status: status,
        dictId: this.currentDic
      });
      this.formTableData = res.data.list || [];
      this.totalSize_form = res.data.total || 0;
    },
    /**
     * @name handleCurrentChange_form
     * @description 切换分页
     * @author wqy
     * @date 2020-09-03 14:22:12
     */
    handleCurrentChange_form(val) {
      this.currentPage_form = val;
      this.getformDrawerList();
    },
    /**
     * @name handleSizeChange_form
     * @description 切换每页展示条数
     * @author wqy
     * @date 2020-09-03 14:22:12
     */
    handleSizeChange_form(val) {
      this.pageSize_form = val;
      this.handleCurrentChange(1);
    },
    /**
     * @name addformTableFunc
     * @description 新增
     * @author wqy
     * @date 2020-09-03 17:24:00
     */
    addformTableFunc() {
      this.titleDiag_form = "新增";
      this.formAdd = {
        dictId: this.currentDic,
        itemText: "",
        itemValue: "",
        description: "",
        sortOrder: "",
        status: true
      };
      this.dialogVisible_form = true;
    },
    /**
     * @name editformTableFunc
     * @description 编辑
     * @author wqy
     * @date 2020-09-03 17:24:00
     */
    editformTableFunc(row) {
      this.titleDiag_form = "编辑";
      for (let key in this.formAdd) {
        if (key == "status") {
          this.formAdd.status = row.status == 1 ? true : false;
        } else {
          this.formAdd[key] = row[key];
        }
      }
      this.formCurrentId = row.id;
      this.dialogVisible_form = true;
    },
    /**
     * @name getSysDictItemByCon
     * @description
     * @author wqy
     * @date 2020-09-04 11:27:18
     */
    async getSysDictItemByCon() {
      let { dictId, itemText, itemValue } = this.formAdd;
      const res = await apiObj.getSysDictItemByCon({
        dictId: dictId,
        itemText: itemText,
        itemValue: itemValue
      });
      return res.data;
    },
    /**
     * @name configSureFunc_form
     * @description 确定新增
     * @author wqy
     * @date 2020-09-03 17:23:24
     */
    async configSureFunc_form() {
      let {
        dictId,
        itemText,
        itemValue,
        description,
        sortOrder,
        status
      } = this.formAdd;
      if (itemText === "") {
        this.$message({
          message: "名称不能为空",
          type: "warning"
        });
        return;
      }
      if (itemValue === "") {
        this.$message({
          message: "数据值不能为空",
          type: "warning"
        });
      }
      Promise.all([this.getSysDictItemByCon()]).then(async res1 => {
        if (res1[0] && res1[0].length > 0) {
          this.$message({
            message: `字典项已存在，请重新填写名称及数据值`,
            type: "warning"
          });
          return;
        }
        let api = "formAdd";
        if (this.titleDiag_form == "编辑") {
          api = "formEdit";
        }
        const res = await apiObj[api]({
          dictId: dictId,
          itemText: itemText,
          itemValue: itemValue,
          description: description,
          sortOrder: sortOrder,
          status: status ? 1 : 0,
          id: this.titleDiag_form == "编辑" ? this.formCurrentId : null
        });
        if (res.status === 1000) {
          this.$message({
            message: `${this.titleDiag_form}成功`,
            type: "success"
          });
          this.dialogVisible_form = false;
          this.handleCurrentChange_form(1);
        }
      });
    },
    /**
     * @name deleteFormFunc
     * @description 删除字典项
     * @author wqy
     * @date 2020-09-04 11:08:23
     */
    async deleteFormFunc(row) {
      const res = await apiObj.deleteForm({
        id: row.id
      });
      this.$message({
        type: "success",
        message: "删除成功!"
      });
      this.handleCurrentChange_form(1);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../jcsz/common-switch.scss";
.inlineBlock {
  display: inline-block;
}
.need {
  color: red;
  padding-right: 3px;
}
.search_wrap {
  padding: 20px 20px 10px;
}
.btn_wrap {
  padding-left: 20px;
}
.search_wrap {
  border-bottom: 1px solid #eee;
  >>> {
    .el-form {
      .el-form-item {
        margin-bottom: 10px;
        .el-form-item__label {
          color: #666;
          font-weight: 400;
        }
        .el-select {
          width: 100%;
        }
        // width: 25%;
        // display: inline-block;
        // vertical-align: top;
      }
    }
  }
}
.table_wrap {
  padding-top: 10px;
}
.page_box {
  padding: 10px 0;
  text-align: center;
}
.el-dropdown-link {
  color: #02c58d;
  cursor: pointer;
}
.formTable_wrap {
  padding: 0 20px;
}
.dialog-footer {
  display: block;
  text-align: center;
  padding-top: 20px;
}
.drawer_wrap {
  >>> {
    [role="heading"] {
      outline: none !important;
    }
  }
}
.approve_history_wrap {
  max-height: 500px;
}
.page_box {
  text-align: center;
  padding: 20px 0;
}
.item_p_wrap {
  line-height: 24px;
  padding: 4px 0;
  span {
    color: #888;
  }
  .item_desc {
    display: inline-block;
    width: 80px;
    color: #999;
  }
}
.borderTop {
  border-top: 1px solid #dcdfe6;
  padding-top: 15px;
  margin-top: 15px;
}
</style>
